<template>
  <div
    class="item"
    :class="RaceStatus === -1 ? 'unPublic' : RaceStatus === 0 ? 'begin' : 'end'"
    @dblclick="handlerToDetail(props.item.id)"
  >
    <div class="left">
      <img class="img" src="../../../assets/icon/svg/race2.svg" alt="" />
    </div>
    <div class="mid">
      <div class="top">
        <n-ellipsis style="max-width: 240px">
          <span class="title" @click="handlerToDetail(props.item.id)">{{
            props.item.title
          }}</span>
        </n-ellipsis>
      </div>
      <div class="bottom">
        <div class="b-left">
          <div class="start-time text">
            <i class="iconfont icon-rili"></i>
            开始时间:{{ props.item.startTime || "xxxx-xx-xx" }} 结束时间:{{
              props.item.endTime || "xxxx-xx-xx"
            }}
            &emsp13;
            <span class="text2">
              <i class="iconfont icon-shijian"></i
              >{{ getDuration(props.item.duration) || "0" }}
            </span>
          </div>
          <div class="reg-start-time text" v-show="props.item.type == 1">
            <i class="iconfont icon-rili"></i>
            报名时间:{{ props.item.regStartTime || "xxxx-xx-xx" }} 报名结束:{{
              props.item.regEndTime || "xxxx-xx-xx"
            }}
          </div>
          <div class="reg-start-time text" v-show="props.item.type == 0">
            报名时间: 无需报名
          </div>
        </div>
      </div>
    </div>
    <div class="midRight">
      <div class="tags">
        <n-button class="btn" size="tiny" round type="warning">
          <i class="iconfont icon-bisai"></i>
          <span class="text" v-show="props.item.format == 0">ACM</span>
          <span class="text" v-show="props.item.format == 1">OI</span>
          <span class="text" v-show="props.item.format == 2">IOI</span>
          <span class="text" v-show="props.item.format == 3">天梯</span>
        </n-button>
      </div>
      <div class="tags">
        <n-button
          class="btn"
          size="tiny"
          round
          type="success"
          v-show="props.item.type == 1"
        >
          <i class="iconfont icon-tuandui"></i>团队赛
        </n-button>
        <n-button
          class="btn"
          size="tiny"
          round
          type="error"
          v-show="props.item.type == 0"
        >
          <i class="iconfont icon-zuozhe"></i>个人赛
        </n-button>
      </div>
      <div class="tags">
        <n-button
          class="btn"
          size="tiny"
          round
          type="success"
          strong
          secondary
          v-show="props.item.auth == 0"
        >
          <i class="iconfont icon-bisai1"></i>
          <span class="text2">公开赛</span>
        </n-button>
        <n-button
          class="btn"
          size="tiny"
          round
          type="error"
          strong
          secondary
          v-show="props.item.auth == 1"
        >
          <i class="iconfont icon-bisai1"></i>
          <span class="text2">私有赛</span>
        </n-button>
        <n-button
          class="btn"
          size="tiny"
          round
          type="warning"
          strong
          secondary
          v-show="props.item.auth == 2"
        >
          <i class="iconfont icon-bisai1"></i>
          <span class="text2">保护赛</span>
        </n-button>
      </div>
    </div>
    <div class="right">
      <span class="status" v-show="RaceStatus == -1">未 开 始</span>
      <span class="status" v-show="RaceStatus == 0">进 行 中</span>
      <span class="status" v-show="RaceStatus == 1">已 结 束</span>
    </div>
  </div>
</template>

<script setup>
import { defineProps, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const props = defineProps({
  item: {
    type: Object,
    default: {},
  },
});
onMounted(() => {
  initStatus();
});
/**
 * 比赛状态
 * 0进行中
 * 1已结束
 * -1未开始
 */
const RaceStatus = ref(0);
const getDuration = (duration) => {
  if (Math.floor(duration / 60) < 60) {
    return (duration / 60).toFixed(1) + "分钟";
  }
  if (Math.floor(duration / 60 / 60) < 24) {
    return (duration / 60 / 60).toFixed(1) + "小时";
  }
  return (duration / 60 / 60 / 24).toFixed(0) + "天";
};

const handlerToDetail = (id) => {
  localStorage.removeItem("raceTab");
  localStorage.removeItem(`${id}ShowStar`);
  localStorage.removeItem(`${id}ShowAuto`);
  router.push({
    path: `/home/race-detail/${id}`,
  });
};
const initStatus = () => {
  const now = Date.now();
  const start = Date.parse(props.item.startTime);
  const end = Date.parse(props.item.endTime);
  if (now - start < 0) {
    RaceStatus.value = -1;
    return;
  }
  if (now - end > 0) {
    RaceStatus.value = 1;
    return;
  }
  RaceStatus.value = 0;
};
</script>

<style lang="less" scoped>
.item {
  width: 99%;
  height: 100px;
  margin: 10px auto;
  border-radius: 5px;
  border: 3px solid;
  border-left: 6px solid;
  display: flex;
  overflow: hidden;
  user-select: none;
  box-shadow: 3px 3px 25px rgba(255, 255, 255, 0.2),
    -3px -3px 15px rgba(255, 255, 255, 0.1);
  position: static;
  transition: 0.2s;
  &:hover {
    background-color: rgb(240, 244, 250);
    transform: scale(1.001);
  }

  &:active {
    transform: scale(0.999);
  }

  .left {
    width: 8%;
    height: 100%;
    display: flex;
    .img {
      width: 85%;
      height: 85%;
      margin: auto;
    }
  }

  .mid {
    display: flex;
    flex-direction: column;

    .top {
      margin: auto 0 0 0;

      .title {
        font-size: 22px;
        font-weight: 550;

        &:hover {
          color: rgb(58, 159, 85);
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }

    .bottom {
      font-size: 12px;
      color: #888;
      margin: 0 0 5px 0;
      display: flex;

      .b-left {
        display: flex;
        flex-direction: column;

        .text {
          margin: auto 0;
          height: 20px;
        }

        .text2 {
          margin: auto 0;
          height: 20px;
          color: #555;
        }
      }

      .b-mid {
        display: flex;
        flex-direction: column;
        margin: auto 7px;
      }

      .b-right {
      }
    }
  }

  .midRight {
    width: 7%;
    height: 100%;
    margin: auto 0 auto auto;
    display: flex;
    flex-direction: column;

    .tags {
      margin: auto 0;
      display: flex;
      height: 33%;

      .btn {
        margin: auto;
        font-weight: 600;
        width: 90%;

        .text {
          font-weight: 600;
        }
      }
    }
  }

  .right {
    width: 3%;
    height: 100%;
    margin: auto 0 auto 0;
    display: flex;

    .status {
      margin: auto;
      color: white;
      word-spacing: 5px;
      writing-mode: vertical-rl;
      text-align: center;
    }
  }
}

.unPublic {
  border-color: rgba(60, 128, 242, 0.8);

  .right {
    background-color: rgba(60, 128, 242);
  }

  .icon-rili,
  .icon-shijian {
    color: rgb(132, 187, 255);
  }
}

.begin {
  border-color: rgba(233, 160, 23, 0.8);

  .right {
    background-color: rgba(233, 160, 23);
  }

  .icon-rili,
  .icon-shijian {
    color: rgba(233, 160, 23);
  }
}

.end {
  border-color: rgba(199, 53, 83, 0.8);

  .right {
    background-color: rgba(199, 53, 83);
  }

  .icon-rili,
  .icon-shijian {
    color: rgba(199, 53, 83);
  }
}
</style>
